<template>
  <div>
    <el-container>
      <!-- 顶部 -->
      <div id="shortcut">
        <div class="w" role="navigation" aria-label="顶部导航" tabindex="0">
          <ul class="fr">
            <li v-if="showLoginOrRegButton" id="ttbar-login" class="shortcut_btn fore1 dropdown">
              <a @click="checkLogin()" class="link-login" style="cursor:pointer">你好，请登录</a>&nbsp;&nbsp;
              <a @click="checkReg()" class="link-regist style-red" style="cursor:pointer">免费注册</a>
            </li>
            <li v-else-if="!showLoginOrRegButton" id="ttbar-login" class="shortcut_btn fore1 dropdown">
              <a class="link-login" style="cursor:pointer">
                <el-dropdown>
                <span class="el-dropdown-link">
                 {{ nowUserName }} <i class="el-icon-setting el-icon--right"></i>
                </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>
                      <a target="_blank" :href="'/userAbout?id=1'" aria-label="修改密码">修改密码</a></el-dropdown-item>
                    <el-dropdown-item>
                      <a target="_blank" :href="'/userAbout?id=2'" aria-label="个人资料">个人资料</a></el-dropdown-item>
                    <el-dropdown-item>
                      <a target="_blank" :href="'/userAbout?id=3'" aria-label="上传头像">上传头像</a></el-dropdown-item>
                    <el-dropdown-item>
                      <a target="_blank" :href="'/receiverAddresses'" aria-label="收货地址">收货地址
                      </a>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>


              </a>&nbsp;&nbsp;
              <a @click="logout()" class="link-regist style-red" style="cursor:pointer">退出登录</a>&nbsp;&nbsp;
            </li>
            <li class="spacer"></li>
            <li v-if="!showLoginOrRegButton" class="shortcut_btn fore2">
              <div class="dt">
                <a target="_blank" :href="'/mall/myOrderList'"
                   aria-label="我的订单">我的订单
                </a>
              </div>
            </li>
            <li v-if="!showLoginOrRegButton" class="spacer"></li>
            <li v-if="!showLoginOrRegButton" class="shortcut_btn fore2">
              <div class="dt">
                <a target="_blank" :href="'/mall/CartLayout'"
                   aria-label="购物车">购物车
                </a>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <el-header class="header-layout">

        <div class="header-container">
          <div class="header-wrap">
            <el-image class="logo" src="/logo.png"></el-image>
            <el-menu class="menu"
                     router
                     :default-active="activeMenuItem"
                     mode="horizontal"
                     background-color="#ffffff"
                     text-color="#2c3e50"
                     active-text-color="#44B549">
              <el-menu-item :index="item.url"
                            v-for="item in categoryList" :key="item.url">
                <span v-text="item.name"></span>
              </el-menu-item>
              <el-menu-item index="/baike">
                <span>百科</span>
              </el-menu-item>
              <el-menu-item index="/mall">
                <span>商城</span>
              </el-menu-item>
            </el-menu>
          </div>
        </div>
      </el-header>
      <!-- 主体 -->
      <el-main class="main-layout">
        <router-view/>
      </el-main>
      <!-- 底部 -->
      <el-footer class="footer-layout">
        <div class="footer-container">
          <div class="footer-wrap">
            <div class="copyright" v-html="copyright"></div>
          </div>
        </div>
      </el-footer>
    </el-container>
    <el-dialog :title="dialogTitile" :visible.sync="dialogTableVisible" width="500px" :close-on-click-modal="false">

      <el-form v-if="dialogTitile==='登录'" :model="ruleForm" status-icon :rules="rules" ref="ruleForm"
               label-width="100px" class="login-from">
        <el-form-item label="账号" prop="username">
          <el-input prefix-icon="el-icon-user" v-model="ruleForm.username" autocomplete="off" width="150px">
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input prefix-icon="el-icon-key" type="password" v-model="ruleForm.password" autocomplete="off"
                    width="150px">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="login-bnt" type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <div class="g-font12 g-c-9 g-center g-m10-bt">登录即代表同意
            <a href="" target="_blank">《隐私政策》</a>
          </div>
        </el-form-item>
      </el-form>

      <el-form v-if="dialogTitile==='注册'" :model="regForm" status-icon :rules="regRules" ref="regForm"
               label-width="100px" class="login-from">
        <el-form-item label="用户名" prop="username">
          <el-input prefix-icon="el-icon-user" v-model="regForm.username" autocomplete="off" width="150px">
          </el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input prefix-icon="el-icon-user" v-model="regForm.phone" autocomplete="off" width="150px">
          </el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="email">
          <el-input prefix-icon="el-icon-user" v-model="regForm.email" autocomplete="off" width="150px">
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input prefix-icon="el-icon-key" type="password" v-model="regForm.password" autocomplete="off"
                    width="150px">
          </el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input prefix-icon="el-icon-key" type="password" v-model="regForm.confirmPassword" autocomplete="off"
                    width="150px">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="login-bnt" type="primary" @click="submitForm('regForm')">提交</el-button>
          <div class="g-font12 g-c-9 g-center g-m10-bt">注册即代表同意
            <a href="" target="_blank">《隐私政策》</a>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import httpApi from "@/http";

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.regForm.confirmPassword !== '') {
          this.$refs.regForm.validateField('confirmPassword');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.regForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      dialogTitile: "登录",
      activeMenuItem: this.$router.currentRoute.path,
      categoryList: [],
      showLoginOrRegButton: true,
      copyright: '',
      nowUserName: "张三",
      dialogTableVisible: false,
      // 登录表单
      ruleForm: {
        username: 'root',
        password: '123456'
      },
      // 表单规则
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
        ]
      },
      // 注册表单
      regForm: {
        avatar: null,
        confirmPassword: '123456',
        email: 'student@tedu.cn',
        password: '123456',
        phone: '13800138008',
        username: 'root',
      },
      // 表单规则
      regRules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'},
          {validator: validatePass, trigger: 'blur'}
        ],
        confirmPassword: [
          {required: true, message: '请输入确认密码', trigger: 'blur'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'blur'},
          {validator: validatePass2, trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {pattern: /^\d{11}$/, message: '手机号码必须是11位的纯数字', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          {
            pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
            message: '请输入正确格式的电子邮箱',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (formName === 'ruleForm') {
            localStorage.setItem('loginInfo', JSON.stringify("{'sername': '张三'}"));
            console.log('已经将登录信息存入到localStorage中，即将跳转页面……');
            this.showLoginOrRegButton = false;
            this.dialogTableVisible = false;
            this.$router.go(0);
          }
          if (formName === 'regForm') {
            this.checkLogin();
            this.dialogTableVisible = false;

          }
        } else {
          console.log('error submit!!');
          return false;
        }

      });
    },
    checkLogin() {
      this.dialogTableVisible = true;
      this.dialogTitile = "登录";
    },
    checkReg() {
      this.dialogTableVisible = true;
      this.dialogTitile = "注册";
    },
    logout() {
      localStorage.setItem('loginInfo', '');
      this.showLoginOrRegButton = true;
      this.$router.go(0);
    },
    /**
     * 初始化检查是否携带登录信息
     */
    toCheckLogged() {
      let loginInfo = localStorage.getItem('loginInfo');
      if (loginInfo !== null) {
        if (loginInfo !== '') {
          this.showLoginOrRegButton = false;
          this.nowUserName = "张三";//JSON.parse(loginInfo).username;
        } else {
          this.showLoginOrRegButton = true;
        }
      } else {
        this.showLoginOrRegButton = true;

      }
    },
    loadCategoryList() {
      let categoryList = [
        {id: 1, name: '推荐', url: '/tuijian'},
        {id: 2, name: '经验', url: '/jingyan'},
        {id: 3, name: '功效', url: '/gongxiao'},
        {id: 4, name: '冲泡', url: '/chongpao'},
        {id: 5, name: '存放', url: '/cunfang'},
        {id: 6, name: '禁忌', url: '/jinji'},
        {id: 7, name: '茶器', url: '/chaqi'},
        {id: 8, name: '文化', url: '/wenhua'},
        {id: 9, name: '花茶', url: '/huacha'}
      ];
      this.categoryList = categoryList;
    },
    loadCopyright() {
      let copyright = '<p>版权所有：达内时代科技集团, IT学院, Java教学研发部</p>' +
          '<p>备案号：京ICP备17010360号（模拟数据）' +
          '<img style="position: relative; top: 5px; margin-left: 20px; margin-right: 5px;" ' +
          'src=""/>' +
          '京公网安备 110111010110号（模拟数据）</p>' +
          '<p><span>联系邮箱：java@tedu.cn</span>' +
          '<span style="margin-left: 30px;">公众号：达内教育</span></p>' +
          '<p>建议您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流浏览器浏览本网站</p>';
      this.copyright = copyright;
    },
    checkActiveMenuItem() {
      if (this.$store.state.articleCategoryLink) {
        this.activeMenuItem = this.$store.state.articleCategoryLink;
      }
    }
  },
  created() {
    this.loadCategoryList();
    this.loadCopyright();
    this.toCheckLogged();
  },
  mounted() {
    this.toCheckLogged();
    this.checkActiveMenuItem();
  }
}
</script>

<style>

/*登录注册*/
#shortcut {
  border-bottom: 1px solid #ddd;
  background-color: #e3e4e5;
}

#shortcut .w {
  height: 30px;
  line-height: 30px;
  color: #999;
}

.fr {
  float: right;
}

#shortcut li {
  float: left;
}

#ttbar-login {
  margin-right: 8px;
  z-index: 20;
}

#ttbar-login a {
  color: #44B549;
}

#shortcut a {
  color: #999;
}

#shortcut .style-red {
  color: #f10215;
}

#shortcut li.spacer {
  overflow: hidden;
  margin: 11px 5px 0;
  width: 1px;
  height: 10px;
  background-color: #ccc;
}

.login-from {
  padding: 20px 50px 20px 0px;
}

.login-bnt {
  background-image: linear-gradient(90deg, #8bc34a, #4caf50) !important;
  height: 45px;
  width: 100%;
  line-height: 45px;
  margin-top: 30px;
  border-radius: 50px !important;
  font-size: 16px;
  text-align: center;
  color: #fff;
}

/*导航栏*/
.header-layout {
  height: 100px !important;
  background: #fff;
  text-align: center;
  padding: 0;
}

.header-wrap {
  width: 1200px;
  margin: 30px auto 0 auto;
}

.header-wrap .logo {
  width: 160px;
  height: 50px;
  float: left;
}

.header-wrap .menu {
  margin-left: 200px;
}

.main-layout {
  text-align: center;
  padding: 0 !important;
}

.main-container {
  margin-top: 20px;
}

.main-wrap {
  width: 1200px;
  margin: 0 auto;
  padding-top: 10px;
}

.main-wrap .nav-breadcrumb {

  margin-bottom: 20px;
}

.footer-layout {
  text-align: center;
}

.footer-wrap {
  width: 1200px;
  margin: 20px auto 0 auto;
  padding: 10px 0 30px 0;
  border-top: 2px solid #44B549 !important;
}

.footer-wrap .copyright {
  color: dimgray;
  font-size: 13px;
}

.footer-wrap .copyright p {
  line-height: 30px;
}

.float-link-container {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 1;
}

.left-aside-container {
  margin-right: 5px;
  width: 875px;
  float: left;
}

.left-aside-wrap {

}

.left-aside-wrap .article-list {
  background: #fff;
  border-radius: 5px;
  padding: 35px;
}


.article-list-item .left .image {
  width: 220px;
  height: 150px;
  border-radius: 5px;
  float: left;
}

.article-list-item .right {
  margin-left: 240px;
  text-align: left;
}

.article-list-item .right .title {
  padding: 6px 0;
  font-size: 20px;
}

.article-list-item .right .title a {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  color: #000;
}

.article-list-item .right .title a:hover {
  color: #44B549;
}

.article-list-item .right .content {
  margin: 25px 0;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
  color: #333;
}

.article-list-item .right .tag {
  font-size: 13px;
  font-style: normal;
  color: #999;
  margin-right: 3px;
}

.article-list-item .right .up {
  font-size: 13px;
  font-style: normal;
  color: #999;
  margin-right: 20px;
}

.article-list-item .right .down {
  font-size: 13px;
  font-style: normal;
  color: #999;
  margin-right: 20px;
}

.article-list-item .right .date {
  font-size: 13px;
  font-style: normal;
  color: #999;
}

.btn-load-more {
  width: 200px;
}

.el-menu--horizontal {
  border: none !important;
}

.el-menu-item {
  font-size: 20px !important;
}

.el-menu-item.is-active {
  background: transparent !important;
  border-bottom: 2px solid #44B549 !important;
}
.right-aside-container {
  width: 300px;
  padding-left: 900px;
}


.el-menu-item:hover {
  color: #44B549 !important;
  background: transparent !important;
}
</style>